<!--
@ 作者: 阿拉丁矿工 黄传鸿 <hchhyzc@foxmail.com>
-->
<template>
  <div class="right_select">
    <!-- 编辑图标 编辑线  -->
    <div style="height: 5px; width: 100%"></div>
    <div class="h_flex_row_between">
      <!-- 菜单-1.0_编辑-图元 -->
      <NTooltip placement="bottom" trigger="hover" v-for="item in eidt">
        <template #trigger>
          <svg class="h_svg_icon" v-if="!item.active" xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" :width="IconSize" :height="IconSize"
            viewBox="0 0 1024 1024" v-html="item.disable" @click.stop="menuStore.menuHandle(item.key)"></svg>
          <svg class="h_svg_icon" v-if="item.active" xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" :width="IconSize" :height="IconSize"
            viewBox="0 0 1024 1024" v-html="item.enabled" @click.stop="menuStore.menuHandle(item.key)"></svg>
        </template>
        <span>{{ item.label }}</span>
      </NTooltip>

      <NTooltip placement="bottom" trigger="hover" v-for="item in editLine">
        <template #trigger>
          <svg class="h_svg_icon" v-if="!item.active" xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" :width="IconSize" :height="IconSize"
            viewBox="0 0 1024 1024" v-html="item.disable" @click.stop="menuStore.menuHandle(item.key)"></svg>
          <svg class="h_svg_icon" v-if="item.active" xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" :width="IconSize" :height="IconSize"
            viewBox="0 0 1024 1024" v-html="item.enabled" @click.stop="menuStore.menuHandle(item.key)"></svg>
        </template>
        <span>{{ item.label }}</span>
      </NTooltip>
    </div>
    <!-- 对齐 -->
    <div style="height: 5px; width: 100%"></div>
    <div class="h_flex_row_between">
      <NTooltip placement="bottom" trigger="hover" v-for="item in align">
        <template #trigger>
          <svg class="h_svg_icon" v-if="!item.active" xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" :width="IconSize" :height="IconSize"
            viewBox="0 0 1024 1024" v-html="item.disable" @click.stop="menuStore.menuHandle(item.key)"></svg>
          <svg class="h_svg_icon" v-if="item.active" xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" :width="IconSize" :height="IconSize"
            viewBox="0 0 1024 1024" v-html="item.enabled" @click.stop="menuStore.menuHandle(item.key)"></svg>
        </template>
        <span>{{ item.label }}</span>
      </NTooltip>
    </div>
    <!-- 包及图层 -->
    <div style="height: 5px; width: 100%"></div>
    <div class="h_flex_row_between">
      <NTooltip placement="bottom" trigger="hover" v-for="item in wrapLayout">
        <template #trigger>
          <svg class="h_svg_icon" v-if="!item.active" xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" :width="IconSize" :height="IconSize"
            viewBox="0 0 1024 1024" v-html="item.disable" @click.stop="menuStore.menuHandle(item.key)"></svg>
          <svg class="h_svg_icon" v-if="item.active" xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" :width="IconSize" :height="IconSize"
            viewBox="0 0 1024 1024" v-html="item.enabled" @click.stop="menuStore.menuHandle(item.key)"></svg>
        </template>
        <span>{{ item.label }}</span>
      </NTooltip>
    </div>
    <!-- 分割线 -->
    <div style="width: 100%; height: 5px; margin-top: 5px"></div>
    <!-- 工具 -->
    <div class="h_flex_row_around">
      <NTooltip placement="bottom" trigger="hover">
        <template #trigger>
          <svg class="h_svg_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
            version="1.1" :width="IconSize" :height="IconSize" viewBox="0 0 1024 1024"
            v-html="onGetDataManagerIcon('clearSelectIcon')" @click="onClearSelect"></svg>
        </template>
        <span>清理选择</span>
      </NTooltip>
      <NTooltip placement="bottom" trigger="hover">
        <template #trigger>
          <svg class="h_svg_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
            version="1.1" :width="IconSize" :height="IconSize" viewBox="0 0 1024 1024"
            v-html="onGetDataManagerIcon('clearFlagIcon')" @click="onClearCtrlIcon"></svg>
        </template>
        <span>清理指示</span>
      </NTooltip>
      <NTooltip placement="bottom" trigger="hover">
        <template #trigger>
          <svg class="h_svg_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
            version="1.1" :width="IconSize" :height="IconSize" viewBox="0 0 1024 1024"
            v-html="onGetDataManagerIcon('dataCopyIcon')" @click="onCopyPel"></svg>
        </template>
        <span>复制图元</span>
      </NTooltip>
      <NTooltip placement="bottom" trigger="hover">
        <template #trigger>
          <svg class="h_svg_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
            version="1.1" :width="IconSize" :height="IconSize" viewBox="0 0 1024 1024"
            v-html="onGetDataManagerIcon('pasteIcon')" @click="onPastePel"></svg>
        </template>
        <span>粘贴图元</span>
      </NTooltip>
      <!-- 导入画布及图元 -->
      <NTooltip placement="bottom" trigger="hover">
        <template #trigger>
          <svg class="h_svg_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
            version="1.1" :width="IconSize" :height="IconSize" viewBox="0 0 1024 1024"
            v-html="onGetDataManagerIcon('fileLeadingInIcon')" @click="onOpenFileDialog()"></svg>
        </template>
        <span>导入画布及图元</span>
      </NTooltip>
      <!-- 导出工程 -->
      <NTooltip placement="bottom" trigger="hover">
        <template #trigger>
          <svg class="h_svg_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
            version="1.1" :width="IconSize" :height="IconSize" viewBox="0 0 1024 1024"
            v-html="onGetDataManagerIcon('fileLeadingOutIcon')" @click="onPagePelsLeadOutJSON()"></svg>
        </template>
        <span>导出画布及图元</span>
      </NTooltip>
    </div>
    <!-- 分割线 -->
    <div style="width: 100%; height: 5px"></div>
    <!-- 选择树 -->
    <div class="select_tree">
      <n-tree accordion checkable block-line draggable :data="pels" :node-props="onNodeProps"
        :default-checked-keys="defaultCheckedKeys" :checked-keys="defaultCheckedKeys" />
    </div>
    <!-- 文件导入 -->
    <input type="file" style="display: none" ref="fileRef" @change="onLeadingIn" />
  </div>
</template>

<script setup lang="ts">
/* ================================================================================================ */
// 🍀引入
/* ================================================================================================ */
import { ref, reactive, onMounted, toRefs, watch, onUnmounted, computed } from "vue";
import { useMessage } from 'naive-ui';
import { TreeOption } from "naive-ui";
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 图元端函数引入
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import {
  onGetDataManagerIcon,
  onActionLeftNavigation,//激活左框导航
  onActionDownNavigation, // 激活下框导航
  onHideLeftNavigation, // 隐藏左框导航
  onHideDownNavigation, // 隐藏下框导航
  onSetElementCont,
  onGetElementCont,
  onGetUUID,
  onRecordLog, //日志处理器
  onPagePelsLeadOutJSON,
  onParentAnValOpt,
} from "@/functions";

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 引入存储
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import { useMenuStore } from "@/store/menuStore"; // 菜单
import { useCanvasStore } from "@/store/canvasStore"; // 画布
import { useWorkStore } from "@/store/workStore"; // 工作数据
import { storeToRefs } from "pinia";

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 使用存储
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
const menuStore = useMenuStore(); // 菜单
const canvasStore = useCanvasStore(); // 画布
const workStore = useWorkStore(); // 设备数据
const message = useMessage()// 消息
/* ================================================================================================ */
//                                 ★变量
/* ================================================================================================ */
/** 解构存储*/
const { eidt, wrapLayout, align, editLine } = storeToRefs(menuStore);
/** 图元数据 */
let pels = computed(() => workStore.pels);
/** 图标尺寸 */
const IconSize = 30;
const defaultCheckedKeys = ref([""]);
/** 文件参数 */
let fileRef = ref();

/* ================================================================================================ */
//                                函数 ★
/* ================================================================================================ */

/** 节点属性 */
const onNodeProps = ({ option }: { option: TreeOption }) => {
  // console.log("节点属性")
  return {
    onClick: () => {
      // console.log("点击事件");
      // console.log(option)

      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      // 🐸 转储
      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      let addKey = String(option.key); // 添加键
      /** 深度拷贝-选择键 */
      let copyKeys = JSON.parse(JSON.stringify(canvasStore.selectKeys));
      /** 重复状态 */
      let repeatState = false;

      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      // 🐸 遍历 拷贝选择键
      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      if (copyKeys.length > 0) {
        copyKeys.forEach((keyItem: string, index: number) => {
          if (keyItem === addKey) {
            repeatState = true;
            copyKeys.splice(index, 1); // 删除重复键
          }
        });
      }

      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      // 🐸 不重复→添加键;重复→删除重复键
      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      if (!repeatState) {
        canvasStore.selectKeys.push(option.key); // 添加键
      } else {
        canvasStore.selectKeys = copyKeys;
      }
      onActionLeftNavigation("LeftDraw"); // 激活左框导航
      onHideLeftNavigation("LeftEvent"); // 隐藏-事件
      onHideLeftNavigation("LeftAnimation"); // 隐藏-动画
      onHideDownNavigation("DownPelAttr"); // 隐藏下框导航
      canvasStore.selectedPel = option; // 选择图元

      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      // 🐸 创建_父动画值_选项
      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      if (String(option.parent) !== 'none') {
        onParentAnValOpt();//创建_父动画值_选项
      }
      canvasStore.tips = "已选择 " + option.label;
      setTimeout(() => {
        onActionDownNavigation("DownPelAttr"); // 激活下框导航
      }, 100);
      onToggleSelect(); // 切换选择
    },
  };
};

/** 清理选择 */
const onClearSelect = () => {
  // console.log("清理选择");
  canvasStore.selectKeys = []; // 清空-选择的图元键
  defaultCheckedKeys.value = []; //清理-选择项
  onHideDownNavigation("DownPelAttr"); // 隐藏下框导航
  canvasStore.selectedPel = {};
};

/** 清理控制图标 */
const onClearCtrlIcon = () => {
  // console.log("清理选择");
  canvasStore.ctrlIconDataSet = []; //清理-控制图标数据
};

/** 切换选择 */
const onToggleSelect = () => {
  // console.log("选择切换");
  defaultCheckedKeys.value = []; //清理-选择项
  for (let index = 0; index < canvasStore.selectKeys.length; index++) {
    const Key = canvasStore.selectKeys[index];
    defaultCheckedKeys.value.push(Key);
  }
};

/** 复制图元 */
const onCopyPel = () => {
  // console.log("复制图元");
  canvasStore.copyPel = JSON.parse(JSON.stringify(canvasStore.selectedPel));
  message.success("已复制图元。");
  canvasStore.tips = "已复制图元。"
};

/** 粘贴图元 */
const onPastePel = () => {
  // console.log("粘贴图元");
  // canvasStore.copyPel;
  if (!canvasStore.copyPel.key) {
    message.error("未选择图元")
    return;
  }

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 ★ 遍历-视图数据
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

  const Copyitem = JSON.parse(JSON.stringify(canvasStore.copyPel));
  /** ★ ★ 获取图元类型 */
  let PelType = Copyitem.type;
  // console.log(`图元类型=${PelType}`)
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // ◆ ◆ 复制图元参数
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  if (PelType === "wrap" /*包*/) {
    /** 图元id */
    let pelId = "wrap" + onGetUUID();
    /** 图元参数 */
    let pelInfo = Copyitem;
    /** 设置图元参数_图元id */
    pelInfo.key = pelId;
    /** 设置图元参数_图元父id */
    pelInfo.parent = "none";
    try {
      if (pelInfo.children.length > 0) {
        let childrens = pelInfo.children;
        childrens.forEach((element: any) => {
          element.parent = pelId;

          if (element.type === "horizontaLine" /*水平线*/) {
            /** 图元id */
            let pelId = "horizontaLine" + onGetUUID();
            /** 设置图元参数_图元id */
            element.key = pelId;
          }
          if (element.type === "verticalLine" /*垂直线*/) {
            /** 图元id */
            let pelId = "verticalLine" + onGetUUID();
            /** 设置图元参数_图元id */
            element.key = pelId;
          }
          if (element.type === "slantLine" /*斜线*/) {
            /** 图元id */
            let pelId = "slantLine" + onGetUUID();
            /** 设置图元参数_图元id */
            element.key = pelId;
          }
          if (element.type === "circle" /*圆*/) {
            /** 图元id */
            let pelId = "circle" + onGetUUID();
            /** 设置图元参数_图元id */
            element.key = pelId;
          }
          if (element.type === "ellipse" /*椭圆*/) {
            /** 图元id */
            let pelId = "ellipseCont" + onGetUUID();
            /** 设置图元参数_图元id */
            element.key = pelId;
          }
          if (element.type === "arc" /*三点弧线*/) {
            /** 图元id */
            let pelId = "arc" + onGetUUID();
            /** 设置图元参数_图元id */
            element.key = pelId;
          }
          if (element.type === "circlePolygon" /*圆分多边形*/) {
            /** 图元id */
            let pelId = "circlePolygon" + onGetUUID();
            /** 设置图元参数_图元id */
            element.key = pelId;
          }
          if (element.type === "rectangle" /*矩形*/) {
            /** 图元id */
            let pelId = "rectangle" + onGetUUID();
            /** 设置图元参数_图元id */
            element.key = pelId;
          }
          if (element.type === "polygon" /*多边形*/) {
            let pelId = "polygon" + onGetUUID(); // 图元id
            /** 设置图元参数_图元id */
            element.key = pelId;
          }
          if (element.type === "polyline" /*折线*/) {
            let pelId = "polyline" + onGetUUID(); // 图元id
            /** 设置图元参数_图元id */
            element.key = pelId;
          }
          if (element.type === "path" /*路径*/) {
            let pelId = "polyline" + onGetUUID(); // 图元id
            /** 设置图元参数_图元id */
            element.key = pelId;
          }
          if (element.type === "svgText" /*Svg文本*/) {
            /** 图元id */
            let pelId = "svgText" + onGetUUID();
            /** 设置图元参数_图元id */
            element.key = pelId;
          }
          if (element.type === "divBlock" /*DIV块*/) {
            /** 图元id */
            let pelId = "divBlock" + onGetUUID();
            /** 设置图元参数_图元id */
            element.key = pelId;
          }
          if (element.type === "divText" /*DIV文本*/) {
            /** 图元id */
            let pelId = "divText" + onGetUUID();
            /** 设置图元参数_图元id */
            element.key = pelId;
          }
          if (element.type === "svgImage" /*svg图片*/) {
            /** 图元id */
            let pelId = "svgImage" + onGetUUID();
            /** 设置图元参数_图元id */
            element.key = pelId;
          }
        });
      }
    } catch (error) { }
    workStore.pels.push(Copyitem);      // 添加_图元数据
    canvasStore.selectedPel = pelInfo   // 添加-选择图元数据
    canvasStore.selectKeys = [];        // 清理选择
    canvasStore.selectKeys.push(pelId); // 添加键
    canvasStore.tips = "已选择 " + Copyitem.label
    onToggleSelect();//切换选择

  }
  if (PelType === "horizontaLine" /*水平线*/) {
    /** 查询字符*/
    let findStr = "horizontaLineCont";
    /** 计数 */
    let cont = onSetElementCont(findStr, Number(onGetElementCont(findStr) + 1));
    /** 图元id */
    let pelId = "horizontaLine" + onGetUUID();
    /** 图元名称*/
    let pelName = "水平线_" + cont;
    /** 图元参数 */
    let pelInfo = Copyitem;
    /** 设置图元参数_图元名称 */
    pelInfo.label = pelName;
    /** 设置图元参数_图元id */
    pelInfo.key = pelId;
    /** 设置图元参数_图元父id */
    pelInfo.parent = "none";
    workStore.pels.push(Copyitem);      // 添加_图元数据
    canvasStore.selectedPel = pelInfo   // 添加-选择图元数据
    canvasStore.selectKeys = [];        // 清理选择
    canvasStore.selectKeys.push(pelId); // 添加键
    canvasStore.tips = "已选择 " + Copyitem.label
    onToggleSelect();//切换选择
  }
  if (PelType === "verticalLine" /*垂直线*/) {
    /** 计数 */
    let VerticalLineCont = onSetElementCont(
      "verticalLineCont",
      Number(onGetElementCont("verticalLineCont")) + 1
    );
    /** 图元id */
    let pelId = "verticalLine" + onGetUUID();
    /** 图元名称*/
    let pelName = "垂直线_" + VerticalLineCont;
    /** 图元参数 */
    let pelInfo = Copyitem;
    /** 设置图元参数_图元名称 */
    pelInfo.label = pelName;
    /** 设置图元参数_图元id */
    pelInfo.key = pelId;
    /** 设置图元参数_图元父id */
    pelInfo.parent = "none";
    workStore.pels.push(Copyitem);      // 添加_图元数据
    canvasStore.selectedPel = pelInfo   // 添加-选择图元数据
    canvasStore.selectKeys = [];        // 清理选择
    canvasStore.selectKeys.push(pelId); // 添加键
    canvasStore.tips = "已选择 " + Copyitem.label
    onToggleSelect();//切换选择
  }
  if (PelType === "slantLine" /*斜线*/) {
    /** 查询字符*/
    let findStr = "slantLineCont";
    /** 计数 */
    let cont = onSetElementCont(findStr, Number(onGetElementCont(findStr) + 1));
    /** 图元id */
    let pelId = "slantLine" + onGetUUID();
    /** 图元名称*/
    let pelName = "斜线_" + cont;
    /** 图元参数 */
    let pelInfo = Copyitem;
    /** 设置图元参数_图元名称 */
    pelInfo.label = pelName;
    /** 设置图元参数_图元id */
    pelInfo.key = pelId;
    /** 设置图元参数_图元父id */
    pelInfo.parent = "none";
    workStore.pels.push(Copyitem);      // 添加_图元数据
    canvasStore.selectedPel = pelInfo   // 添加-选择图元数据
    canvasStore.selectKeys = [];        // 清理选择
    canvasStore.selectKeys.push(pelId); // 添加键
    canvasStore.tips = "已选择 " + Copyitem.label
    onToggleSelect();//切换选择
  }
  if (PelType === "circle" /*圆*/) {
    /** 查询字符*/
    let findStr = "circleCont";
    /** 计数 */
    let cont = onSetElementCont(findStr, Number(onGetElementCont(findStr) + 1));
    /** 图元id */
    let pelId = "circle" + onGetUUID();
    /** 图元名称*/
    let pelName = "圆_" + cont;
    /** 图元参数 */
    let pelInfo = Copyitem;
    /** 设置图元参数_图元名称 */
    pelInfo.label = pelName;
    /** 设置图元参数_图元id */
    pelInfo.key = pelId;
    /** 设置图元参数_图元父id */
    pelInfo.parent = "none";
    workStore.pels.push(Copyitem);      // 添加_图元数据
    canvasStore.selectedPel = pelInfo   // 添加-选择图元数据
    canvasStore.selectKeys = [];        // 清理选择
    canvasStore.selectKeys.push(pelId); // 添加键
    canvasStore.tips = "已选择 " + Copyitem.label
    onToggleSelect();//切换选择
  }
  if (PelType === "ellipse" /*椭圆*/) {
    /** 计数 */
    let EllipseCont = onSetElementCont(
      "ellipseCont",
      Number(onGetElementCont("ellipseCont")) + 1
    );
    /** 图元id */
    let pelId = "ellipseCont" + onGetUUID();
    /** 图元名称*/
    let pelName = "椭圆_" + EllipseCont;
    /** 图元参数 */
    let pelInfo = Copyitem;
    /** 设置图元参数_图元名称 */
    pelInfo.label = pelName;
    /** 设置图元参数_图元id */
    pelInfo.key = pelId;
    /** 设置图元参数_图元父id */
    pelInfo.parent = "none";
    workStore.pels.push(Copyitem);      // 添加_图元数据
    canvasStore.selectedPel = pelInfo   // 添加-选择图元数据
    canvasStore.selectKeys = [];        // 清理选择
    canvasStore.selectKeys.push(pelId); // 添加键
    canvasStore.tips = "已选择 " + Copyitem.label
    onToggleSelect();//切换选择
  }
  if (PelType === "arc" /*三点弧线*/) {
    /** 计数 */
    let EllipseCont = onSetElementCont(
      "arcCont",
      Number(onGetElementCont("arcCont")) + 1
    );
    /** 图元id */
    let pelId = "arc" + onGetUUID();
    /** 图元名称*/
    let pelName = "三点弧线_" + EllipseCont;
    /** 图元参数 */
    let pelInfo = Copyitem;
    /** 设置图元参数_图元名称 */
    pelInfo.label = pelName;
    /** 设置图元参数_图元id */
    pelInfo.key = pelId;
    /** 设置图元参数_图元父id */
    pelInfo.parent = "none";
    workStore.pels.push(Copyitem);      // 添加_图元数据
    canvasStore.selectedPel = pelInfo   // 添加-选择图元数据
    canvasStore.selectKeys = [];        // 清理选择
    canvasStore.selectKeys.push(pelId); // 添加键
    canvasStore.tips = "已选择 " + Copyitem.label
    onToggleSelect();//切换选择
  }
  if (PelType === "circlePolygon" /*圆分多边形*/) {
    /** 计数 */
    let EllipseCont = onSetElementCont(
      "circlePolygonCont",
      Number(onGetElementCont("circlePolygonCont")) + 1
    );
    /** 图元id */
    let pelId = "circlePolygon" + onGetUUID();
    /** 图元名称*/
    let pelName = "圆分多边形_" + EllipseCont;
    /** 图元参数 */
    let pelInfo = Copyitem;
    /** 设置图元参数_图元名称 */
    pelInfo.label = pelName;
    /** 设置图元参数_图元id */
    pelInfo.key = pelId;
    /** 设置图元参数_图元父id */
    pelInfo.parent = "none";
    workStore.pels.push(Copyitem);      // 添加_图元数据
    canvasStore.selectedPel = pelInfo   // 添加-选择图元数据
    canvasStore.selectKeys = [];        // 清理选择
    canvasStore.selectKeys.push(pelId); // 添加键
    canvasStore.tips = "已选择 " + Copyitem.label
    onToggleSelect();//切换选择
  }
  if (PelType === "rectangle" /*矩形*/) {
    /** 计数 */
    let Cont = onSetElementCont(
      "rectangleCont",
      Number(onGetElementCont("rectangleCont")) + 1
    ); // 计数
    /** 图元id */
    let pelId = "rectangle" + onGetUUID();
    /** 图元名称 */
    let pelName = "矩形_" + Cont;
    /** 图元参数 */
    let pelInfo = Copyitem;
    /** 设置图元参数_图元名称 */
    pelInfo.label = pelName;
    /** 设置图元参数_图元id */
    pelInfo.key = pelId;
    /** 设置图元参数_图元父id */
    pelInfo.parent = "none";
    workStore.pels.push(Copyitem);      // 添加_图元数据
    canvasStore.selectedPel = pelInfo   // 添加-选择图元数据
    canvasStore.selectKeys = [];        // 清理选择
    canvasStore.selectKeys.push(pelId); // 添加键
    canvasStore.tips = "已选择 " + Copyitem.label
    onToggleSelect();//切换选择
  }
  if (PelType === "polygon" /*多边形*/) {
    /** 计数 */
    let Cont = onSetElementCont(
      "polygonCont",
      Number(onGetElementCont("polygonCont")) + 1
    ); // 计数
    let pelId = "polygon" + onGetUUID(); // 图元id
    let pelName = "多边形_" + Cont; // 图元名称
    /** 图元参数 */
    let pelInfo = Copyitem;
    /** 设置图元参数_图元名称 */
    pelInfo.label = pelName;
    /** 设置图元参数_图元id */
    pelInfo.key = pelId;
    /** 设置图元参数_图元父id */
    pelInfo.parent = "none";
    workStore.pels.push(Copyitem);      // 添加_图元数据
    canvasStore.selectedPel = pelInfo   // 添加-选择图元数据
    canvasStore.selectKeys = [];        // 清理选择
    canvasStore.selectKeys.push(pelId); // 添加键
    canvasStore.tips = "已选择 " + Copyitem.label
    onToggleSelect();//切换选择
  }
  if (PelType === "polyline" /*折线*/) {
    let Cont = onSetElementCont(
      "polylineCont",
      Number(onGetElementCont("polylineCont")) + 1
    ); // 计数
    let pelId = "polyline" + onGetUUID(); // 图元id
    let pelName = "折线_" + Cont; // 图元名称
    /** 图元参数 */
    let pelInfo = Copyitem;
    /** 设置图元参数_图元名称 */
    pelInfo.label = pelName;
    /** 设置图元参数_图元id */
    pelInfo.key = pelId;
    /** 设置图元参数_图元父id */
    pelInfo.parent = "none";
    workStore.pels.push(Copyitem);      // 添加_图元数据
    canvasStore.selectedPel = pelInfo   // 添加-选择图元数据
    canvasStore.selectKeys = [];        // 清理选择
    canvasStore.selectKeys.push(pelId); // 添加键
    canvasStore.tips = "已选择 " + Copyitem.label
    onToggleSelect();//切换选择
  }
  if (PelType === "path" /*路径*/) {
    /** 计数 */
    let Cont = onSetElementCont("pathCont", Number(onGetElementCont("pathCont")) + 1);
    let pelId = "polyline" + onGetUUID(); // 图元id
    let pelName = "折路径_" + Cont; // 图元名称
    /** 图元参数 */
    let pelInfo = Copyitem;
    /** 设置图元参数_图元名称 */
    pelInfo.label = pelName;
    /** 设置图元参数_图元id */
    pelInfo.key = pelId;
    /** 设置图元参数_图元父id */
    pelInfo.parent = "none";
    workStore.pels.push(Copyitem);      // 添加_图元数据
    canvasStore.selectedPel = pelInfo   // 添加-选择图元数据
    canvasStore.selectKeys = [];        // 清理选择
    canvasStore.selectKeys.push(pelId); // 添加键
    canvasStore.tips = "已选择 " + Copyitem.label
    onToggleSelect();//切换选择择
  }
  if (PelType === "svgText" /*Svg文本*/) {
    /** 计数 */
    let Cont = onSetElementCont(
      "svgTextCont",
      Number(onGetElementCont("svgTextCont")) + 1
    );
    /** 图元id */
    let pelId = "svgText" + onGetUUID();
    /** 图元名称*/
    let pelName = "Svg文本_" + Cont;
    /** 图元参数 */
    let pelInfo = Copyitem;
    /** 设置图元参数_图元名称 */
    pelInfo.label = pelName;
    /** 设置图元参数_图元id */
    pelInfo.key = pelId;
    /** 设置图元参数_图元父id */
    pelInfo.parent = "none";
    workStore.pels.push(Copyitem);      // 添加_图元数据
    canvasStore.selectedPel = pelInfo   // 添加-选择图元数据
    canvasStore.selectKeys = [];        // 清理选择
    canvasStore.selectKeys.push(pelId); // 添加键
    canvasStore.tips = "已选择 " + Copyitem.label
    onToggleSelect();//切换选择
  }
  if (PelType === "divBlock" /*DIV块*/) {
    /** 计数 */
    let Cont = onSetElementCont(
      "divBlockCont",
      Number(onGetElementCont("divBlockCont")) + 1
    );
    /** 图元id */
    let pelId = "divBlock" + onGetUUID();
    /** 图元名称*/
    let pelName = "DIV块_" + Cont;
    /** 图元参数 */
    let pelInfo = Copyitem;
    /** 设置图元参数_图元名称 */
    pelInfo.label = pelName;
    /** 设置图元参数_图元id */
    pelInfo.key = pelId;
    /** 设置图元参数_图元父id */
    pelInfo.parent = "none";
    workStore.pels.push(Copyitem);      // 添加_图元数据
    canvasStore.selectedPel = pelInfo   // 添加-选择图元数据
    canvasStore.selectKeys = [];        // 清理选择
    canvasStore.selectKeys.push(pelId); // 添加键
    canvasStore.tips = "已选择 " + Copyitem.label
    onToggleSelect();//切换选择
  }
  if (PelType === "divText" /*DIV文本*/) {
    /** 计数 */
    let Cont = onSetElementCont(
      "divTextCont",
      Number(onGetElementCont("divTextCont")) + 1
    );
    /** 图元id */
    let pelId = "divText" + onGetUUID();
    /** 图元名称*/
    let pelName = "DIV文本_" + Cont;
    /** 图元参数 */
    let pelInfo = Copyitem;
    /** 设置图元参数_图元名称 */
    pelInfo.label = pelName;
    /** 设置图元参数_图元id */
    pelInfo.key = pelId;
    /** 设置图元参数_图元父id */
    pelInfo.parent = "none";
    workStore.pels.push(Copyitem);      // 添加_图元数据
    canvasStore.selectedPel = pelInfo   // 添加-选择图元数据
    canvasStore.selectKeys = [];        // 清理选择
    canvasStore.selectKeys.push(pelId); // 添加键
    canvasStore.tips = "已选择 " + Copyitem.label
    onToggleSelect();//切换选择
  }
  if (PelType === "svgImage" /*svg图片*/) {
    /** 计数 */
    let Cont = onSetElementCont(
      "svgImageCont",
      Number(onGetElementCont("svgImageCont")) + 1
    );
    /** 图元id */
    let pelId = "svgImage" + onGetUUID();
    /** 图元名称*/
    let pelName = "svg图片_" + Cont;
    /** 图元参数 */
    let pelInfo = Copyitem;
    /** 设置图元参数_图元名称 */
    pelInfo.label = pelName;
    /** 设置图元参数_图元id */
    pelInfo.key = pelId;
    /** 设置图元参数_图元父id */
    pelInfo.parent = "none";
    workStore.pels.push(Copyitem);      // 添加_图元数据
    canvasStore.selectedPel = pelInfo   // 添加-选择图元数据
    canvasStore.selectKeys = [];        // 清理选择
    canvasStore.selectKeys.push(pelId); // 添加键
    canvasStore.tips = "已选择 " + Copyitem.label
    onToggleSelect();//切换选择
  }

};

/** 打开文件对话框 */
const onOpenFileDialog = () => {
  // console.log("打开文件对话框");
  // console.log(fileRef.value);
  fileRef.value.dispatchEvent(new MouseEvent("click"));
};

/**  导入页面和图元 */
const onLeadingIn = async () => {
  // console.log("图元数据-导入");
  // console.log(fileRef)
  // console.log(fileRef.value.files[0])
  // 读取文件
  const file = fileRef.value.files[0];
  const reader = new FileReader();
  reader.readAsText(file);
  reader.onload = () => {
    // 解析JSON
    const jsonData = JSON.parse(reader.result);
    // console.log(jsonData);
    if (jsonData.type === "pageAandCanvas") {
      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      // 🐸 修改页面
      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      // console.log(jsonData.page);
      /** 页面尺寸 */
      canvasStore.canvasAttr.pageSize = String(
        JSON.parse(JSON.stringify(jsonData.page.pageSize))
      );
      /** 页面方向 */
      canvasStore.canvasAttr.pageOrientation = String(
        JSON.parse(JSON.stringify(jsonData.page.pageOrientation))
      );
      /** 页面精度 */
      canvasStore.canvasAttr.pageAccuracy = String(
        JSON.parse(JSON.stringify(jsonData.page.pageAccuracy))
      );
      /** 页面单位 */
      canvasStore.canvasAttr.pageUnit = String(
        JSON.parse(JSON.stringify(jsonData.page.pageUnit))
      );
      /** 画布缩放 */
      canvasStore.canvasAttr.canvasScale = Number(
        JSON.parse(JSON.stringify(jsonData.page.canvasScale))
      );
      /** 画布背景色 */
      canvasStore.canvasAttr.canvasBackColor = String(
        JSON.parse(JSON.stringify(jsonData.page.canvasBackColor))
      );
      // 🦢 格栅
      /** 格栅模式选项:1-无格栅;2-点格栅;3-方格; */
      canvasStore.canvasAttr.gridModel = Number(
        JSON.parse(JSON.stringify(jsonData.page.gridModel))
      );
      /** 格栅样式选项:1-像素尺寸;2-均分画布;3-按宽高均分画布;*/
      canvasStore.canvasAttr.gridStyle = Number(
        JSON.parse(JSON.stringify(jsonData.page.gridStyle))
      );
      /** 格栅间距 */
      canvasStore.canvasAttr.gridSpace = Number(
        JSON.parse(JSON.stringify(jsonData.page.gridSpace))
      );
      /** 宽等分数 */
      canvasStore.canvasAttr.gridBisectionWidthCont = Number(
        JSON.parse(JSON.stringify(jsonData.page.gridBisectionWidthCont))
      );
      /** 宽等分数 */
      canvasStore.canvasAttr.gridBisectionHeightCont = Number(
        JSON.parse(JSON.stringify(jsonData.page.gridBisectionHeightCont))
      );
      /** 格栅点颜色 */
      canvasStore.canvasAttr.gridDotColor = String(
        JSON.parse(JSON.stringify(jsonData.page.gridDotColor))
      );
      /** 小格颜色 */
      canvasStore.canvasAttr.gridColorMini = String(
        JSON.parse(JSON.stringify(jsonData.page.gridColorMini))
      );
      /** 大格颜色 */
      canvasStore.canvasAttr.gridColorMax = String(
        JSON.parse(JSON.stringify(jsonData.page.gridColorMax))
      );
      /** 格栅宽度 */
      canvasStore.canvasAttr.gridWidth = Number(
        JSON.parse(JSON.stringify(jsonData.page.gridWidth))
      );
      /** 格栅高度 */
      canvasStore.canvasAttr.gridHeight = Number(
        JSON.parse(JSON.stringify(jsonData.page.gridHeight))
      );

      // 🦢 光标
      /** 显示光标 */
      canvasStore.canvasAttr.isShowCursor = Boolean(
        JSON.parse(JSON.stringify(jsonData.page.isShowCursor))
      );
      /** 光标颜色 */
      canvasStore.canvasAttr.cursorColor = String(
        JSON.parse(JSON.stringify(jsonData.page.cursorColor))
      );
      /** 光标盒子尺寸 */
      canvasStore.canvasAttr.cursorBoxSize = Number(
        JSON.parse(JSON.stringify(jsonData.page.cursorBoxSize))
      );
      /** 光标长度 */
      canvasStore.canvasAttr.cursorLang = Number(
        JSON.parse(JSON.stringify(jsonData.page.cursorLang))
      );
      /** 光标线宽度 */
      canvasStore.canvasAttr.cursorLineWidth = Number(
        JSON.parse(JSON.stringify(jsonData.page.cursorLineWidth))
      );

      // 🦢 捕捉
      /** 捕捉状态 */
      canvasStore.canvasAttr.isCatch = Boolean(
        JSON.parse(JSON.stringify(jsonData.page.isCatch))
      );
      /** 捕捉距离 */
      canvasStore.canvasAttr.catchRange = Boolean(
        JSON.parse(JSON.stringify(jsonData.page.catchRange))
      );
      /** 捕捉到 上左 */
      canvasStore.canvasAttr.catchUpLeft = Boolean(
        JSON.parse(JSON.stringify(jsonData.page.catchUpLeft))
      );
      /** 捕捉到 上 */
      canvasStore.canvasAttr.catchUp = Boolean(
        JSON.parse(JSON.stringify(jsonData.page.catchUp))
      );
      /** 捕捉到 上右 */
      canvasStore.canvasAttr.catchUpRight = Boolean(
        JSON.parse(JSON.stringify(jsonData.page.catchUpRight))
      );
      /** 捕捉到 左 */
      canvasStore.canvasAttr.catchLeft = Boolean(
        JSON.parse(JSON.stringify(jsonData.page.catchLeft))
      );
      /** 捕捉到 中 */
      canvasStore.canvasAttr.catchMidle = Boolean(
        JSON.parse(JSON.stringify(jsonData.page.catchMidle))
      );
      /** 捕捉到 右 */
      canvasStore.canvasAttr.catchRight = Boolean(
        JSON.parse(JSON.stringify(jsonData.page.catchRight))
      );
      /** 捕捉到 下右 */
      canvasStore.canvasAttr.catchDownRight = Boolean(
        JSON.parse(JSON.stringify(jsonData.page.catchDownRight))
      );
      /** 捕捉到 下 */
      canvasStore.canvasAttr.catchDown = Boolean(
        JSON.parse(JSON.stringify(jsonData.page.catchDown))
      );
      /** 捕捉到 下左 */
      canvasStore.canvasAttr.catchDownLeft = Boolean(
        JSON.parse(JSON.stringify(jsonData.page.catchDownLeft))
      );

      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      // 🐸 添加图元
      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      // console.log(jsonData.pels);
      for (let index = 0; index < jsonData.pels.length; index++) {
        const pelItem = jsonData.pels[index];
        canvasStore.copyPel = JSON.parse(JSON.stringify(pelItem)); //复制图元
        onPastePel(); //粘贴图元
      }
      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      // 🐸 提示 记录到日志
      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      onRecordLog(`导入页面和图元成功`);
      message.success("导入页面和图元成功")
    } else {
      onRecordLog(`文件错误`);
      message.error(`文件错误`);
    }
  };
};

/* ================================================================================================ */
//                                 ★ 监听
/* ================================================================================================ */
/** 监听-选择切换 */
watch(
  () => canvasStore.selectToggle,
  () => {
    // console.log("右边嵌入面板监听-切换选择")
    onToggleSelect();
  }
);
</script>

<style lang="scss" scoped>
/* 引入共用css */
@import "@/assets/h.scss";

.right_select {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.select_tree {
  width: 100%;
  height: 76vh;
  overflow: auto;
  /* firefox */
  scrollbar-color: rgba(144, 146, 152, 0.3) transparent;
  scrollbar-width: auto;

  /* chrome */
  &::-webkit-scrollbar,
  &::-webkit-scrollbar-track-piece {
    background-color: transparent;
  }

  &::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: rgb(197, 197, 197);
  }
}
</style>
